require("../css/personalPage.less")

tool.footer("personalPage")
window.onload = function () {
    // 头像是背景图获取标签
    // let avatar = document.querySelector(".avatar")
    // // 头像是img标签的获取标签
    let avatar = document.querySelector(".avatar img")
    let userName = document.querySelector(".userName")
    let signatureContent = document.querySelector(".signatureContent")
    let sportDuration = document.querySelector(".sportDuration")
    let energyConsumed = document.querySelector(".energyConsumed")
    let btn = document.querySelector(".btn")
    // 获取服务器地址,方便后面把图片放到互联网上
    const baseUrl = 'http://139.9.177.51:8099'
    // 接口数据请求
    let userId = localStorage.getItem("userId")
    getPersonalInfo()
    // 渲染真实数据函数
    function getPersonalInfo() {
        // 用户账号信息  
        http.get("/users/accountinfo", {
            userId
        }, function (res) {
            // 头像是html直接插入标签写法--------
            if (res.data.imgurl) {
                avatar.src = baseUrl + res.data.imgurl;
            }

            // 头像是背景图写法------------------
            // js用本地的静态资源之前必须先导入,除非是html链接不用导入,其他的都需要导入--------------------------------------------------------------------------注意
            // let url = require("../img/头像.jpg")
            // res.data.imgurl === null ? avatar.style.backgroundImage = `url(${url})` : avatar.style.backgroundImage = `url(${baseUrl + res.data.imgurl})`;
            userName.innerText = res.data.nickname;
            res.data.sign === null ? signatureContent.textContent = ` 这个人很懒,什么也没留下~` : signatureContent.textContent = res.data.sign;
        })
        // 用户徽章和运动信息
        http.get("/users/mysportsBadge", {
            userId
        }, function (res) {
            sportDuration.innerText = res.data.sports.times
            energyConsumed.textContent = res.data.sports.calorie
        })
    }
    // 退出登录 清空本地存储 跳转登录页面
    btn.addEventListener("click", function () {
        // 清空本地存储
        localStorage.clear();
        // 跳转登录页面
        location.href = "login.html"
    })
    // 点击图片修改头像
    let upload = document.querySelector("#upload")
    // 点击头像图片,触发上传文件的input框的点击
    avatar.addEventListener("click", function (e) {
        // 冒泡事件阻止
        e.stopPropagation()
        upload.click()
    })
    // 监听input框的改变,获取文件相对路径 上传头像图片
    upload.addEventListener("change", function () {
        let file = upload.files[0]
        http.uploadFile("/users/upload", 'imgurl', file, function (res) {
            console.log(res);
            let imgurl = res.data
            // 修改用户的信息 头像
            http.post("/users/userEdit", {
                imgurl,
                userId
            }, function (res1) {
                if (res1.status === 0) {
                    // 或者重新渲染
                    getPersonalInfo()
                    // 可以直接改变图片路径
                    // avatar.src = baseUrl + res.data
                    tool.toast(1, "头像修改成功!")
                }
            })
        })
    })

    // 点击头部,跳转到个人信息页面
    let header = document.querySelector("header")
    header.addEventListener("click",function(){
        location.href = "personalInfo.html"
    })


}